<template>
    <section>
        <el-row :gutter="40">
            <el-col :span="8">
                <sy-baselist
                        ref="roleList"
                        title="部门"
                        :hidePagination="true"
                        :hideHeader="true"
                        :hideAdd="true"
                        :hideEdit="true"
                        :hideDel="true"
                        fixWhere="FID<>-1"
                        @current-change="onRoleChange"
                        listUrl="server/system/Role.ashx?cmd=GetRoleList"
                >
                    <el-table-column prop="FName" label="部门名称" width="150" sortable>
                    </el-table-column>

                </sy-baselist>
            </el-col>
            <el-col :span="14">
                <el-tag type="gray" style="margin: 10px">权限</el-tag>
                <el-button type="primary" @click="saveMenu">保存</el-button>
                <el-tree
                        ref="menuList"
                        :data="data2"
                        v-loading="menuLoading"
                        show-checkbox
                        node-key="FID"
                        :default-checked-keys="checkedKeys"
                        :props="defaultProps">
                </el-tree>
            </el-col>
        </el-row>
        <br>
    </section>
</template>

<script>
    import util from '../../common/util'
    import JSON from "json5"
    export default {
        data(){
            return {
                FRoleID:-1,
                data2:[],
                defaultProps: {
                    children: 'children',
                    label: 'FName'
                },
                menuLoading:false
            }
        },
        computed:{
            checkedKeys:function () {
                return this.getCheckedKeys(this.data2,[])
            }
        },
        methods:{
            getCheckedKeys(data,result){
               for(let i=0;i<data.length;i++){
                   let item=data[i];
                   if(item.checked){
                       result.push(item.FID)
                   }
                   if(item.children){
                       this.getCheckedKeys(item.children,result)
                   }
               }
               return result;
            },
            switchLoading(flag){
                this.menuLoading = flag
            },
            onRoleChange(row,oldRow){
                if(row) {
                    this.FRoleID = row.FID
                    this.getMenu(this.FRoleID);
                }
            },
            getMenu(roleId){
                util.get("server/system/Auth.ashx?cmd=GetMenu",{roleId:roleId},this.switchLoading,result=> {
                    this.data2 = result.menu
                });
            },
            saveMenu(){
                if(this.FRoleID==0){
                    util.msgWarning("请选择角色！")
                    return;
                }
                if(this.FRoleID==-1){
                    util.msgWarning("管理员不需要设置权限！")
                    return;
                }
                let saveData = []
                let nodes = this.$refs.menuList.getCheckedNodes()
                for(let node of nodes){
                    saveData.push({FRoleID:this.FRoleID, FMenuID:node.FID})
                }
                //保存到数据库
                util.post("server/system/Auth.ashx?cmd=SaveRoleAccess",
                    {roleId:this.FRoleID, saveData:JSON.stringify(saveData)},
                    this.switchLoading,result=> {
                     alert("保存成功")
                });
            },
//            renderContent(h, { node, data, store }) {
//               return(
//                   <span>{node.label} <span style="color:red">*</span></span>
//               )
//            }
        },
        mounted() {
            this.getMenu(this.FRoleID);
        }
    }
</script>